<template>
    <el-dialog
      :title="formData.id ? '编辑会议室' : '新增会议室'"
      v-model="dialogVisible"
      width="600px"
      @close="handleClose"
      class="meeting-room-dialog"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="120px"
        class="meeting-room-form"
      >
        <el-form-item label="会议室名称" prop="name">
          <el-input v-model="formData.name" placeholder="如：大会议室301" />
        </el-form-item>
  
        <el-form-item label="类型" prop="type">
          <el-select v-model="formData.type" placeholder="请选择">
            <el-option
              v-for="item in roomTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
  
        <el-form-item label="座位数" prop="capacity">
          <el-input-number
            v-model="formData.capacity"
            :min="1"
            :max="500"
            controls-position="right"
            class="full-width-input"
          />
        </el-form-item>
  
        <el-form-item label="每小时价格" prop="hourlyRate">
          <el-input-number
            v-model="formData.hourlyRate"
            :min="0"
            :step="10"
            controls-position="right"
            class="full-width-input"
          >
            <template #prefix>
              <span class="price-prefix">¥</span>
            </template>
          </el-input-number>
        </el-form-item>
  
        <el-form-item label="面积" prop="area">
          <div class="custom-input-wrapper">
            <el-input
              type="number"
              v-model.number="formData.area"
              class="full-width-input"
            >
              <template #append>
                <span class="unit-suffix">㎡</span>
              </template>
            </el-input>
          </div>
        </el-form-item>
  
        <el-form-item label="多媒体设备" class="equipment-section">
          <el-checkbox-group v-model="formData.equipments" class="equipment-group">
            <el-checkbox label="投影仪" value="projector" class="equipment-item"/>
            <el-checkbox label="音响系统" value="audio" class="equipment-item"/>
            <el-checkbox label="高速网络" value="network" class="equipment-item"/>
            <el-checkbox label="白板" value="whiteboard" class="equipment-item"/>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
  
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false" class="cancel-btn">取消</el-button>
          <el-button
            type="primary"
            @click="handleSubmit"
            :loading="submitLoading"
            class="submit-btn"
          >
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref, reactive, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  
  const props = defineProps({
    visible: Boolean,
    formData: {
      type: Object,
      default: () => ({
        id: null,
        name: '',
        type: 'classroom',
        capacity: 0,
        area: 50,
        hourlyRate: 0,
        equipments: [],
      })
    }
  })
  
  const emit = defineEmits(['update:visible', 'submit'])
  
  const dialogVisible = ref(props.visible)
  const formRef = ref(null)
  const submitLoading = ref(false)
  
  const roomTypes = [
    { value: 'classroom', label: '教室型（主席台+座位）' },
    { value: 'round_table', label: '圆桌型（大型会议桌）' }
  ]
  
  const rules = {
    name: [{ required: true, message: '请输入会议室名称', trigger: 'blur' }],
    type: [{ required: true, message: '请选择会议室类型', trigger: 'change' }],
    capacity: [
      { required: true, message: '请输入座位数' },
      { type: 'number', min: 1, message: '座位数必须大于0' }
    ],
    hourlyRate: [
      { required: true, message: '请输入价格' },
      { type: 'number', min: 0, message: '价格不能为负数' }
    ],
    area: [
      { required: true, message: '请输入面积' },
      { type: 'number', min: 1, message: '面积必须大于 0' }
    ]
  }
  
  const localFormData = reactive({ ...props.formData })
  watch(() => props.formData, (newVal) => {
    Object.assign(localFormData, newVal)
  }, { deep: true, immediate: true })

  watch(() => props.visible, (newVal) => {
    dialogVisible.value = newVal
  })
  
  const handleClose = () => {
    emit('update:visible', false)
    formRef.value.resetFields()
  }
  
  const handleSubmit = async () => {
    try {
      await formRef.value.validate()
      submitLoading.value = true
      emit('submit', localFormData)
    
    } catch (error) {
      if (error !== 'cancel') {
        ElMessage.error('表单验证失败，请检查输入')
      }
    } finally {
      // 无论成功失败都关闭加载状态
      submitLoading.value = false
    }
  }
  </script>

<style scoped>
.meeting-room-dialog :deep(.el-dialog) {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(57, 73, 171, 0.3);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  border: none;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  background: white;
  width: 640px;
}

.meeting-room-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 24px 32px;
  margin: 0;
  border-bottom: none;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.meeting-room-dialog :deep(.el-dialog__title) {
  color: white;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.meeting-room-dialog :deep(.el-dialog__body) {
  padding: 32px;
  max-height: calc(90vh - 180px);
  overflow-y: auto;
  background: white;
  background-image: linear-gradient(to bottom, #ffffff 0%, #f8f9ff 100%);
}

.meeting-room-dialog :deep(.el-dialog__footer) {
  padding: 16px 24px;
  border-top: 1px solid #eef2f7;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: white;
}

.meeting-room-form :deep(.el-form-item__label) {
  color: #4a5568;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 14px;
  margin-bottom: 8px;
}

.meeting-room-form :deep(.el-input__wrapper) {
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: #ffffff;
}

.meeting-room-form :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #667eea, 0 0 0 3px rgba(102, 126, 234, 0.2);
  transform: translateY(-1px);
}

.meeting-room-form :deep(.el-input__inner) {
  height: 42px;
  font-size: 14px;
}

.meeting-room-form :deep(.el-select) {
  width: 100%;
}

.full-width-input {
  width: 100%;
}

.meeting-room-form :deep(.el-input-number) {
  width: 100%;
}

.meeting-room-form :deep(.el-input-number .el-input__inner) {
  text-align: left;
}

.price-prefix {
  color: #3949ab;
  font-weight: 600;
  margin-right: 4px;
}

.unit-suffix {
  color: #3949ab;
  font-weight: 600;
  padding: 0 8px;
}

.custom-input-wrapper {
  position: relative;
  width: 100%;
}

.equipment-section {
  margin-top: 16px;
}

.equipment-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px 0;
  margin-top: 8px;
}

.equipment-item {
  margin-right: 0;
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.equipment-item:hover {
  border-color: #667eea;
  background-color: #f8f9ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.1);
}

.meeting-room-form :deep(.el-checkbox.is-checked) {
  border-color: #667eea;
  background-color: #f0f4ff;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.meeting-room-form :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #3949ab;
  border-color: #3949ab;
}

.meeting-room-form :deep(.el-checkbox__label) {
  color: #3949ab;
  font-weight: 500;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
}

.cancel-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 120px;
  border: 1px solid #e0e0e0;
  color: #3949ab;
  background-color: white;
}

.cancel-btn:hover {
  border-color: #3949ab;
  color: #3949ab;
  background-color: #f1f3fe;
  transform: translateY(-2px);
}

.submit-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 120px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  box-shadow: 0 4px 6px rgba(102, 126, 234, 0.3);
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(57, 73, 171, 0.4);
}

@media (max-width: 768px) {
  .meeting-room-dialog :deep(.el-dialog) {
    width: 90% !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
  }

  .meeting-room-dialog :deep(.el-dialog__body) {
    padding: 16px;
    max-height: calc(90vh - 160px);
  }

  .meeting-room-dialog :deep(.el-dialog__footer) {
    padding: 16px;
  }

  .equipment-group {
    flex-direction: column;
    gap: 8px;
  }
}
</style>